<template>
	<view>
		<view class="personalCenter">
			<view class="jx-content-box" style="margin-top: 20rpx;">
				<view class="jx-header-btm">
					<view class="jx-btm-item">
						<view style="width: 100%;">账户余额：{{balanceInfo.balance}}</view>
						<view style="width: 100%;">待结算：{{balanceInfo.frozen_balance}}</view>
					</view>
					
					<view>
						<view style="background: #FF7104;width: 130rpx;font-size: 30rpx;border-radius: 10rpx;text-align: center;color: #fff;margin-bottom: 20rpx;"
							@click="openUrl('/pages/hxt/mongeyDetail?type='+type)">明细</view>
						<view style="background: #FF7104;width: 130rpx;font-size: 30rpx;border-radius: 10rpx;text-align: center;color: #fff;"
							@click="openUrl('/pages/hxt/withdrawal?type='+type)">提现</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<com-modal :custom="true" :show="accountOpenModal" padding="0" @cancel="closeHandler">
			<view class="jx-modal-title">账户激活</view>
			
			<view style="font-size: 10pt;padding: 10rpx 20rpx;text-align: center;">您的恒信通账户未激活，您需要填写银行卡信息来激活恒信通账户才可进行提现。注意该银行卡将用于后续的资金结算！</view>
			
			
			<view style="margin: 20rpx 0;">
		
				<view class="shopSetting-item">
					<view class="shopSetting-title">银行卡号</view>
					<view class="shopSetting-int">
						<input type="text" placeholder="填写银行卡号" v-model="accountOpenForm.accountCode"/>
					</view>
				</view>
		
				<view class="shopSetting-item">
					<view class="shopSetting-title">姓名</view>
					<view class="shopSetting-int">
						<input type="text" placeholder="填写持卡人的姓名" v-model="accountOpenForm.accountName"/>
					</view>
				</view>
				
				<view class="shopSetting-item">
					<view class="shopSetting-title">身份证号码</view>
					<view class="shopSetting-int">
						<input type="text" placeholder="填写持卡人身份证号码" v-model="accountOpenForm.idCode"/>
					</view>
				</view>
				
				
				<view class="shopSetting-item">
					<view class="shopSetting-title">手机号</view>
					<view class="shopSetting-int">
						<input type="text" placeholder="填写持卡人手机号" v-model="accountOpenForm.tel"/>
					</view>
				</view>
				
				<view style="margin-top: 20rpx;padding: 30rpx;">
					
					<view @click='autoAccountData' style="text-align: center;padding-bottom: 40rpx;font-size: 10pt;color:#ff7104;text-decoration: underline;">填入兰亭实名信息与默认银行卡</view>
					
					<button @click="accountOpen" style="background-color: #fcc80e;color: #fff;font-weight: 600;">确认激活</button>
				</view>
			</view>
			
		</com-modal>
		
	</view>
	
	
	
</template>

<script>
	import jxListCell from '@/components/list-cell/list-cell';
	export default {
		components: {
			jxListCell
		},
		data() {
			return {
				type: 1,
				balanceInfo:{
					balance:'0.00',
					frozen_balance:'0.00'
				},
				accountStatus:'',
				accountOpenModal:false,
				accountOpenForm:{
					accountCode:'',
					accountName:'',
					idCode:'',
					tel:''
				}
				
			}
		},
		onLoad(opt) {
			this.type = opt.type ?? 1;
		},
		onShow() {
			this.balanceQuery();
			this.hxtAccountInfo()
		},
		methods: {
			openUrl(url) {
				if(url == '/pages/hxt/withdrawal?type='+this.type && this.accountStatus === 0){
					this.accountOpenModal = true;
					return ;
				}
				uni.navigateTo({url})
			},
			
			async balanceQuery(){
				let self = this;
				let data = {app_type:self.type};
				let res = await self.$http.request({url:self.$api.hxt.queryBalance,showLoading: true,data})
				if(res.code != 0){
					self.$http.toast(res.msg);
					return;
				}
				res.data.balance = (parseInt(res.data.balance) / 100).toFixed(2);
				res.data.frozen_balance = (parseInt(res.data.frozen_balance) / 100).toFixed(2);
				Object.assign(self.balanceInfo,res.data);
				console.log(self.balanceInfo);
			},
			
			async hxtAccountInfo(){
				let self = this;
				let res = await self.$http.request({url:self.$api.hxt.hxtAccountInfo,showLoading:true})
				if(res.code == 0 && res.data.status == 0){//有恒信通子账户，并且没有激活
					this.accountOpenModal = true;
					this.accountStatus = 0;
				}
				
			},
			closeHandler(){
				this.accountOpenModal = false;
				this.accountOpenForm={
					accountCode:'',
					accountName:'',
					idCode:'',
					tel:''
				}
			},
			async accountOpen(){
				let self = this;
				let res = await self.$http.request({url:self.$api.hxt.hxtAccountOpen,data:this.accountOpenForm,showLoading:true});
				if(res.code === 0){
					this.$http.toast('激活成功');
					this.accountOpenModal = false;
				}
			},
			async autoAccountData(){
				let self = this;
				let res = await self.$http.request({url:self.$api.hxt.lantingUserRealData,showLoading:true})
				if(res.code === 0){
					this.accountOpenForm.accountCode = res.data.bank_account;
					this.accountOpenForm.accountName = res.data.realname;
					this.accountOpenForm.idCode = res.data.cert_no;
					this.accountOpenForm.tel = res.data.mobile;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mana-bottom-btn{border-top:1px solid #eaeaea;padding:20rpx 20rpx;background:white;position:fixed;bottom:0;left:0;width:100%;text-align:center;}
	.mana-bottom-btn > text{border-radius:60rpx;padding:20rpx 0;width:85%;display:inline-block;background:#F24F34;font-size:30rpx;color:white;}
	.personalCenter {
		width: 100%;
		overflow: hidden;
		background: url(https://h5-mingyuanriji.cn/web/static/personalCenter_logo.jpg) no-repeat; 
		background-size: 100%;
	}

	.personalCenter-top {
		margin-top: 40rpx;
		width: 100%;
		overflow: hidden;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.personal-logo {
		width: 128rpx;
		height: 128rpx;
		display: block;
		border-radius: 50px;
		float: left;
	}

	.personal_nicken_ID {
		float: left;
		margin-left: 30rpx;
		width: 400rpx;
		color: #fff;
	}

	.personal_nicken {
		margin: 10upx 0;
		width: 100%;
	}

	.personalCenter-item {
		width: 100%;
		overflow: hidden;
		margin: 20upx 0 0 0;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.jx-content-box {
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		// margin-top: 20rpx;
	}

	.jx-header-btm {
		border-radius: 12rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		background: #ffffff;
		margin-bottom: 20rpx;
		padding: 20rpx 40rpx;
	}


	.jx-btm-num {
		font-size: 12pt;
		font-weight: 600;
		position: relative;
	}

	.jx-btm-text {
		font-size: 9pt;
		opacity: 0.85;
		padding-top: 4rpx;
	}

	.jx-cell-header {
		width: 100%;
		// height: 100rpx;
		height: 70rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx solid #f3f3f3;
	}

	.jx-cell-title {
		font-size: 11pt;
		line-height: 30rpx;
		font-weight: 400;
		color: #333;
		font-weight: 600;
		letter-spacing: 1px;
	}

	.jx-cell-sub {
		font-size: 9pt;
		font-weight: 400;
		color: #999;
		padding-right: 10rpx;
	}

	.share-shop {
		float: right;
		padding-top: 20rpx;
	}

	.tui-collection {
		color: #333;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 96rpx;
		width: 96rpx;
		border-radius: 100rpx;
		background: #F7F7F7;
		margin-right: 10rpx;
	}

	.tui-scale {
		transform: scale(0.7);
		transform-origin: center center;
		line-height: 24rpx;
		font-weight: normal;
	}

	.tui-icon-collection {
		line-height: 20px !important;
		margin-bottom: 0 !important;
		color: #333333;
		font-size: 20px;
	}


	.goods-qrcode-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1000;
		background: rgba(0, 0, 0, 0.5);
		opacity: 1;
		transition: opacity 250ms;
		z-index: 9999;
	}

	.goods-qrcode-body {
		background: #ffffff;
		width: 100%;
		height: 90%;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}

	.goods-qrcode-body .goods-qrcode-box {
		height: 100%;
		position: relative;
		box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.15);
	}

	.goods-qrcode2 {
		position: relative;
		height: 100%;
		flex-direction: column;
	}

	.codeImg_box {
		width: 100%;
		height: 95%;
		// margin-bottom: 20rpx;
	}

	.saveCode-btn {
		color: #939292;
		padding: 10px 20px;
		border-radius: 10px;
	}

	.goods-qrcode {
		width: 100%;
		height: 100%;
		background: #fffffff;
		background-size: 100%;
	}

	.goods-qrcode-close {
		position: absolute;
		top: 40rpx;
		right: 40rpx;
		padding: 15rpx;
	}
	
	
	
	
	
	
	.jx-modal-title {
		text-align: center;
		font-size: 34rpx;
		color: #333;
		padding-top: 20rpx;
		font-weight: bold;
	}
	.shopSetting-item {
		width: 90%;
		margin: 0 auto;
		border-bottom: 1rpx solid #888888;
		overflow: hidden;
		display: flex;
		justify-content: space-between
	}
	.shopSetting-title {
		height: 100rpx;
		line-height: 100rpx;
		margin-right: 20rpx;
		color: #000;
	}
	
	.shopSetting-int {
		height: 100rpx;
		max-width: 80%;
	}
	.shopSetting-int text{
		display: block;
		height: 100rpx;
		line-height: 100rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.shopSetting-int input {
		height: 100rpx;
		text-align: right;
	}
</style>
